<template>
  请输入书籍关键字：
  <input type="text" v-model="mytext" /><p></p>
  查询结果：
  <ul>
      <li v-for="(item, index) in computedList" :key="index">
          {{ item }}
      </li>
  </ul>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { computed, onMounted } from '@vue/runtime-core'
export default {
    setup () {
        const state = reactive({
            mytext: '',
            list: []
        })

        onMounted(() => {
            fetch('/class4/test4-5.json')
                .then(res => res.json())
                .then(res => {
                    state.list = res.list
                })
        })

        const computedList = computed(() => {
            //过滤掉不包含关键字的数据
            const newList = state.list.filter(item => item.includes(state.mytext))
            return newList
        })

        return {
            ...toRefs(state),
            computedList
        }
    }
}
</script>

<style>

</style>